<template>
  <div class="address">
    <input v-model="address"
           placeholder="请输入小区/写字楼/学校等"
           type="text">
    <button @click="sec">搜索</button>

    <div class="history">
      <ul>
        <li @click="page(index)"
            v-for="(item,index) in datas"
            :key="index">
          <div class="shop">{{datas[index].name}}</div>
          <div class="add">{{datas[index].address}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      address: '',
      datas: [],
    }
  },
  methods: {
    page (index) {
      alert(this.datas[index].name)
      localStorage.setItem('add_infor',this.datas[index].name)
      this.$router.push({name:'Address'})
    },
    sec () {

      this.sta()
    },
    sta () {
      this.$axios.get('https://elm.cangdu.org/v1/pois', {
        params: {
          city_id: localStorage.getItem('id'),
          keyword: this.address,
        }
      }).then(res => {
        console.log(res)
        this.datas = res
        console.log('//////////////////////////////////////////////////')
        console.log(this.datas)
      }).catch(err => console.log(err))
    }
  },
}
</script>

<style scoped>
.shop {
  font-size: 19.5px;
}
.history ul {
  padding: 0 20px;
  text-align: left;
  margin-top: 50px;
}
.history li {
  width: 100%;
  text-align: left;
  height: 81px;
  background-color: white;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  padding: 20px 20px 10px;
  font-size: 17px;
  padding: 15px 0;
}
.add {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}
.address {
  width: 100%;
  padding-top: 10px;
}
button {
  background-color: #3190e8;
  color: white;
  width: 68px;
  height: 38px;
  border: none;
  outline: none;
  border-radius: 3px;
  /* margin-top: 3px; */
}
input {
  border: none;
  outline: none;
  margin-left: 45px;
  width: 234px;
  height: 39px !important;
  font-size: 17px;
  color: #999;
  flex: 4;
  background-color: #f1f1f1;
  margin-right: 0.6rem;
  height: 1.5rem;
  border-radius: 0.15rem;
  padding: 0 0.4rem;
}
</style>